<template>
    <div>
        <form-item
            :prop="name"
            :error="error"
            :required="required"
            :rules="rules"
            :class="classes"
            :label-width="isShowCaption ? (!Object.is(labelPos, 'TOP') ? labelWidth : null) : 0"
            :ref="name"
        >
            <span v-if="isShowCaption && labelWidth > 0" slot="label" :class="labelclasses">{{
                isEmptyCaption ? '' : caption
            }}</span>
            <div class="app-editor-contant">{{ $slots.default }}</div>
            <div
                v-if="_formitem && _formitem.validateState && Object.is(_formitem.validateState, 'error')"
                class="app-error-tip"
            >
                <poptip trigger="hover" placement="left" width="300" word-wrap="true" transfer="true">
                    <icon type="ios-information-circle-outline" color="#ed4014" size="20"></icon>
                    <div slot="content" class="app-form-item-error-info">
                        <div class="icon">
                            <icon type="ios-information-circle-outline" color="#ed4014" size="20"></icon>
                        </div>
                        <div class="contant">{{ _formitem.validateMessage }}</div>
                    </div>
                </poptip>
            </div>
        </form-item>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component({})
export default class AppFormItem2 extends Vue {
    /**
     * 名称
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() public caption!: string;

    /**
     * 错误信息
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() public error?: string;

    /**
     * label样式
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() public labelStyle?: string;

    /**
     * 标签位置
     *
     * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
     * @memberof AppFormItem2
     */
    @Prop() public labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP';

    /**
     * 标签宽度
     *
     * @type {number}
     * @memberof AppFormItem2
     */
    @Prop({}) public labelWidth!: number;

    /**
     * 是否显示标题
     *
     * @type {boolean}
     * @memberof AppFormItem2
     */
    @Prop() public isShowCaption?: boolean;

    /**
     * 标签是否空白
     *
     * @type {boolean}
     * @memberof AppFormItem2
     */
    @Prop() public isEmptyCaption?: boolean;

    /**
     * 表单项名称
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() public name!: string;

    /**
     * 内置样式
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() public uiStyle?: string;

    /**
     * 表单项值规则
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() public itemRules!: any;

    /**
     * 值规则数组
     *
     * @type {any[]}
     * @memberof AppFormItem2
     */
    public rules: any[] = [];

    /**
     * 是否必填
     *
     * @type {boolean}
     * @memberof AppFormItem2
     */
    public required: boolean = false;

    /**
     * 表单项值规则监控
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppFormItem2
     */
    @Watch('itemRules')
    onItemRulesChange(newVal: any, oldVal: any) {
        if (newVal) {
            try {
                this.rules = [];
                const _rules: any[] = newVal;
                this.rules = [..._rules];
                this.rules.some((rule: any) => {
                    if (rule.hasOwnProperty('required')) {
                        this.required = rule.required;
                        return true;
                    }
                    return false;
                });
            } catch (error) {}
        }
    }

    /**
     * 计算样式
     *
     * @readonly
     * @type {string[]}
     * @memberof AppFormItem2
     */
    get classes(): string[] {
        return ['app-form-item2', Object.is(this.labelPos, 'TOP') ? 'app-form-item-label-top' : ''];
    }

    /**
     * label样式
     *
     * @readonly
     * @type {string}
     * @memberof AppFormItem2
     */
    get labelclasses(): string {
        return this.labelStyle ? this.labelStyle : '';
    }

    /**
     * vue 生命周期
     *
     * @memberof AppFormItem2
     */
    public mounted() {
        if (this.itemRules) {
            try {
                const _rules: any[] = this.itemRules;
                this.rules = [..._rules];
                this.rules.some((rule: any) => {
                    if (rule.hasOwnProperty('required')) {
                        this.required = rule.required;
                        return true;
                    }
                    return false;
                });
            } catch (error) {}
        }
    }
}
</script>
<style lang="less">
@import './app-form-item2.less';
</style>
